<%@page pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<script type="text/javascript" src="<c:url value="/js/jquery-validate/jquery.validate.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/crocus/util/jquery.validate.extend.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/jquery-validate/localization/messages_es.js"/>"></script>	

<script type="text/javascript" src="<c:url value="/js/crocus/form/evento/HotelForm.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/crocus/form/evento/AlojamientoForm.js"/>"></script>


<script>
    var alojamientoForm;
    var data_hoteles = [];
    var data_alojamientos = [];
    
    
    
    <c:choose>
       <c:when test="${not empty evento.ruta}">
       var data_ruta = {
               id : <c:out value="${evento.ruta.id}"/>,
               cantidadAereo: "<c:out value="${evento.ruta.cantidadAereo}"/>",
               vencimiento1: "<fmt:formatDate type="date" value="${evento.ruta.vencimiento1}" pattern="dd-MM-yyyy" />",
               vencimiento2: "<fmt:formatDate type="date" value="${evento.ruta.vencimiento2}" pattern="dd-MM-yyyy" />",
               vencimiento3: "<fmt:formatDate type="date" value="${evento.ruta.vencimiento3}" pattern="dd-MM-yyyy" />",
               vuelos: []
       };
       var vuelo;
       <c:forEach var="vuelo" items="${evento.ruta.vuelos}">
       vuelo = {
               id : ${vuelo.id},
               origenDestino : "${vuelo.origenDestino}",
               vuelo : "${vuelo.vuelo}",
               fecha : "<fmt:formatDate type="date" value="${vuelo.fecha}" pattern="dd-MM-yyyy" />",
               horaSalida : "<fmt:formatDate type="time" value="${vuelo.horaSalida}" pattern="HH:mm" />",
               horaLlegada : "<fmt:formatDate type="time" value="${vuelo.horaLlegada}" pattern="HH:mm" />",
       }
       data_ruta.vuelos.push(vuelo);
       </c:forEach>
       
       </c:when>
       <c:otherwise>
       var data_ruta = {
               id : "",
               cantidadAereo: "",
               vencimiento1: "",
               vencimiento2: "",
               vencimiento3: "",
               vuelos: []
       };
       </c:otherwise>
    </c:choose>
	$(document).ready(function() {
		      
		$(".button").button();
		$(".datepicker").live('click', function() {
	        $(this).datepicker({
	        	   showOn:'focus',
	        	   dateFormat : 'dd-mm-yy'
	        	}).focus();
	    });
		
		
		$("#mensaje").parent().hide();
		
		$("form:not(#form_ruta, #form_evento)").each(function(){
			var $this = $(this);
			$this.submit(function(){return false;});
			$this.validate();
		});
		
		var $form_evento = $("#form_evento");
        $form_evento.submit(function(){return false;});
        $form_evento.validate();
        
		var $form_ruta = $("#form_ruta");
		$form_ruta.submit(function(){return false;});
		$form_ruta.validate({
		    errorLabelContainer: "#errorRutaBox",
		    wrapper: "li"
		});
		
		
		
		
		$("#volver").click(function(){
			window.location = "<c:url value="/app/page/evento"/>";
		});
		cargarFormulario();
		

		dataRuta_bind();
		
	    $( "#listado_vuelos" ).on("click", ".eliminar_vuelo",  function() {
            var item = $.viewItem( this ),
                index = $.inArray( item.data, item.parent.data );
            $.changeArray( data_ruta.vuelos, "splice", index, 1 );
            return false;
        });

	    $("#agregar_vuelo").click(function(){    	
	    	$.changeArray( data_ruta.vuelos, "push", {
	    		id : "",
	    		origenDestino : "",
                vuelo : "",
                fecha : "",
                horaSalida : "",
                horaLlegada : ""
            });
	    	return false;
	    });
	    
		
		alojamientoForm = new evento_AlojamientoForm();
		alojamientoForm.setAltaHotelServiceUrl('<c:url value="/app/hotel"/>');
		alojamientoForm.setActualizarServiceUrl('<c:url value="/app/hotel"/>');
		alojamientoForm.setBuscarHotelesServiceUrl('<c:url value="/app/hotel"/>');
		alojamientoForm.setHoteles(data_hoteles);
		alojamientoForm.setAlojamientoTmpl("alojamiento_tmpl"); 
		alojamientoForm.actualizarAlojamientos(data_alojamientos);
		
		
		
	});
	
	function cargarFormulario() {        
        var id = $("#evento_id").val();
        var $crearButton = $("#crear");
        var $titulo = $("#titulo");
        
        if (id == null || $.trim(id).length == 0) {
        	$crearButton.click(altaEvento);
        	$crearButton.button('option', 'label', 'Crear');
        	$titulo.text("Crear un nuevo evento");
        } else {
        	$crearButton.click(actualizarEvento);
        	$crearButton.button('option', 'label', 'Actualizar');
        	$titulo.text("Actualizar el evento");
        }
    }
	
	
	function altaEvento(){

	    if (!$("#form_evento").valid()){
	        return false;
	    }     
	    var evento = $("#seccion_evento").serializeObject();
	    var alojamientos = [];
	    $("#alojamientos dt").each(function(){
	    	var alojamiento = $(this).data("data_alojamiento");
	    	alojamiento.id = null;
	    	alojamientos.push(alojamiento);
	    });
	    evento.alojamientos = alojamientos;
        evento.ruta = data_ruta;
	    jQuery.ajax({
	        type : 'POST',
	        url : '<c:url value="/app/evento"/>',
	        contentType : 'application/json',
	        data : $.toJSON(evento),
	        dataType : 'json',
	        success : servicioAltaEventoSuccessCallBack,
	        error : servicioEventoErrorCallBack
	
	    });
	    return false;  		
	}
	
	function actualizarEvento() {

        if (!$("#form_evento").valid()){
            return false;
        }
        if (!$("#form_ruta").valid()){
            return false;
        }
        var evento = $("#seccion_evento").serializeObject();
        var alojamientos = [];
        $("#alojamientos dt").each(function(){
            var alojamiento = $(this).data("data_alojamiento");            
            if ( isNaN(alojamiento.id)) {
            	alojamiento.id = null;
            }
            alojamientos.push(alojamiento);
        });
        evento.alojamientos = alojamientos;
        evento.ruta = data_ruta;
        jQuery.ajax({
            type : 'PUT',
            url : '<c:url value="/app/evento"/>',
            contentType : 'application/json',
            data : $.toJSON(evento),
            dataType : 'json',
            success : servicioActualizacionEventoSuccessCallBack,
            error : servicioEventoErrorCallBack
    
        });
        return false; 		
	}
	
	function dataRuta_bind() {

        $( "#listado_vuelos" ).html(
            $( "#vuelo_tmpl" ).tmplRender( data_ruta.vuelos, { annotate: true })
        );      
        $.dataLink( data_ruta, "#ruta").pushValues();
        $.dataLink( "#ruta", data_ruta );
        var workaround_datalink_vuelos = false;
        if (data_ruta.vuelos.length == 0) {
            workaround_datalink_vuelos = true;
            data_ruta.vuelos.push({
                id : 1,
                origenDestino : "AAA/EEE",
                vuelo : "A1234",
                fecha : "00-00-0000",
                horaSalida : "23:59",
                horaLlegada : "23:59"
            });
        }
        $.dataLink( data_ruta.vuelos, "#listado_vuelos", "#vuelo_tmpl").pushValues();
        $.dataLink( "#listado_vuelos", data_ruta.vuelos );
        if (workaround_datalink_vuelos) {
            $.changeArray( data_ruta.vuelos, "pop");
        }
	}
	
	
	
	function servicioAltaEventoSuccessCallBack(evento) {
		servicioSuccessMensaje("#mensaje", "El evento " + evento.nombre + " se grab&oacute; exitosamente");
        $("#evento_id").val(evento.id);
        cargarFormulario();
        data_ruta  = rutaConvert(evento.ruta);
        dataRuta_bind();
        alojamientoForm.actualizarComboHoteles();
	}
    function servicioActualizacionEventoSuccessCallBack(evento) {
    	data_ruta = rutaConvert(evento.ruta);
    	dataRuta_bind();
    	alojamientoForm.actualizarAlojamientos(evento.alojamientos);
    	alojamientoForm.actualizarComboHoteles();
    	servicioSuccessMensaje("#mensaje", "El evento " + evento.nombre + " se actualiz&oacute; exitosamente");
    
    }

    function rutaConvert(ruta) {
    	if (ruta == null) return null;
    	var rutaConvertida = {
	        id : ruta.id,
	        cantidadAereo: ruta.cantidadAereo,
	        vencimiento1: australianDateConvert(ruta.vencimiento1),
	        vencimiento2: australianDateConvert(ruta.vencimiento2),
	        vencimiento3: australianDateConvert(ruta.vencimiento3),
	        vuelos: []
    	}
    	
    	var vuelo;
    	if (ruta.vuelos != null) {
    		for (var i=0; i< ruta.vuelos.length; i++){
    			 vuelo = {
	               id : ruta.vuelos[i].id,
	               origenDestino : ruta.vuelos[i].origenDestino,
	               vuelo :ruta.vuelos[i].vuelo,
	               fecha : australianDateConvert(ruta.vuelos[i].fecha),
	               horaSalida : fullTimeConvert(ruta.vuelos[i].horaSalida),
	               horaLlegada : fullTimeConvert(ruta.vuelos[i].horaLlegada),
    		     }
    			 rutaConvertida.vuelos.push(vuelo);
    		}
    	}
    	return rutaConvertida;
    }
    
	function servicioEventoErrorCallBack(data) {
		servicioErrorMensaje("#mensaje", "Ocurri&oacute; un error en el alta/actualizaci&oacute;n del evento", data);
	}
	
    var hotel;
    <c:forEach var="hotel" items="${hoteles}">
    hotel = {
    		id : ${hotel.id},
    		nombre : "${hotel.nombre}",
    		direccion : "${hotel.direccion}",
    		contacto : "${hotel.contacto}",
    		telefono : "${hotel.telefono}",
    		mail : "${hotel.mail}"
    };
    data_hoteles.push(hotel);
    </c:forEach>

    var alojamiento;
    <c:forEach var="alojamiento" items="${alojamientos}">
    alojamiento = {
    		id : ${alojamiento.id},
    		hotel : {
    			id : ${alojamiento.hotel.id},
    			nombre : "${alojamiento.hotel.nombre}"
    		},
    		cantidadHabitacionSimple : ${alojamiento.cantidadHabitacionSimple},
    		cantidadHabitacionDoble : ${alojamiento.cantidadHabitacionDoble},
    		cantidadHabitacionOtra : ${alojamiento.cantidadHabitacionOtra},
    		vencimiento1 : "<fmt:formatDate type="date" value="${alojamiento.vencimiento1}" pattern="dd-MM-yyyy" />",
    		vencimiento2 : "<fmt:formatDate type="date" value="${alojamiento.vencimiento2}" pattern="dd-MM-yyyy" />",
    		vencimiento3 : "<fmt:formatDate type="date" value="${alojamiento.vencimiento3}" pattern="dd-MM-yyyy" />"
    }
    data_alojamientos.push(alojamiento);
    </c:forEach>
    
   

    
</script>
<script id="alojamiento_tmpl" type="text/x-jQuery-tmpl">
<dt class="rounded_top" id="\${id}"> <span class="text">Nombre: \${hotel.nombre}</span>
    <span class="action"> 
        <span class="ui-icon ui-icon-pencil alojamiento_editar">Edit</span>
        <span class="ui-icon ui-icon-cancel alojamiento_cancel">Cancel</span> 
    </span>
</dt>
<dd> 
    <ul>
        <li><span>Hab. Simple:</span> \${cantidadHabitacionSimple}</li>
        <li><span>Hab. Doble:</span> \${cantidadHabitacionDoble}</li>
        <li><span>Hab. Otra:</span> \${cantidadHabitacionOtra}</li>
        <li><span>Vencimiento 1:</span>  \${vencimiento1}</li>
        <li><span>Vencimiento 2:</span>  \${vencimiento2}</li>
        <li><span>Vencimiento 3:</span> \${vencimiento3}</li>
    </ul>
</dd>
</script>

<script id="vuelo_tmpl" type="text/x-jquery-tmpl">
        <tr class="small">
            <td>
                <input type="hidden" name="vuelo_id" data-jq-linkto="id" data-jq-linkfrom="id" />
                <input type="text" name="origenDestino" data-jq-linkto="origenDestino" data-jq-linkfrom="origenDestino"  class="required" />
            </td>
            <td>
                <input type="text" name="vuelo" data-jq-linkto="vuelo" data-jq-linkfrom="vuelo" class="required" />
            </td>
            <td>
                <input type="text" name="fecha" data-jq-linkto="fecha" data-jq-linkfrom="fecha" class="required datepicker" />
            </td>
            <td>
                <input type="text" name="horaSalida" data-jq-linkto="horaSalida" data-jq-linkfrom="horaSalida" class="required fulltime"/>
            </td>
            <td>
                <input type="text" name="horaLlegada" data-jq-linkto="horaLlegada" data-jq-linkfrom="horaLlegada" class="required fulltime"/>
            </td>
            <td>
                <button class="eliminar_vuelo">eliminar</button>
            </td>
        </tr>
</script>


<div class="row">
    <h2 id="titulo">Crear Evento</h2>
	<div class="contenedor_mensaje col col_16">
		<div  id="mensaje"></div>
	</div>
</div>
<div class="row steps content_form">
	<div class="col col_3">&nbsp; </div>
	<div class="col col_10">
		<form id="form_evento" name="form_evento">
			<fieldset class="step s_column" id="seccion_evento">
				<legend>Evento</legend>
				<div>
					<label for="nombre">Nombre*</label> 
					<input id="nombre" name="nombre" type="text" value="<c:out value="${evento.nombre}"/>" class="required" />
					<input type="hidden" name="id" id="evento_id" value="<c:out value="${evento.id}"/>"/>
				</div>
				<div>
					<label for="empresa">Empresa*</label>
					<input id="empresa" name="empresa" value="<c:out value="${evento.empresa}"/>" type="text" class="required" />
				</div>
				<div>
					<label for="fechaInicio">Fecha de Inicio</label> 
					<input id="fechaInicio" name="fechaInicio" value="<fmt:formatDate type="date" value="${evento.fechaInicio}" pattern="dd-MM-yyyy" />" type="text" class="datepicker"/>
				</div>
				<div>
					<label for="fechaFin">Fecha de Finalizaci&oacute;n</label> 
					<input id="fechaFin" name="fechaFin" value="<fmt:formatDate type="date" value="${evento.fechaFin}" pattern="dd-MM-yyyy" />" type="text" class="datepicker" />
				</div>
				<div>
                    <label for="cantidadAsistentes">Cantidad de asistentes</label>
                    <input id="cantidadAsistentes" name="cantidadAsistentes" value="<c:out value="${evento.cantidadAsistentes}"/>" type="text" class="number"/>
                </div>
				<div>
                    <label for="supervisorNombre">Supervisor</label>
                    <input id="supervisorNombre" name="supervisorNombre" value="<c:out value="${evento.supervisorNombre}"/>" type="text" />
                </div>
                <div>
                    <label for="supervisorMail">Email del supervisor</label>
                    <input id="supervisorMail" name="supervisorMail" value="<c:out value="${evento.supervisorMail}"/>" type="text" class="email" />
                </div>
			</fieldset>
		</form>	
        <form id="form_alojamiento" name="form_alojamiento">
			<fieldset class="step s_column" id="seccion_alojamiento">
                <legend>Alojamiento</legend>
                <input id="alojamiento.id" name="alojamiento[]id" type="hidden" />
                <div>
                    <label for="alojamiento.hotel.nombre">Hotel*</label> 
                    <input id="alojamiento.hotel.nombre" name="alojamiento[]hotel[]nombre" type="text" class="required" />
                    <button class="button" id="crear_actualizar_hotel">Nuevo Hotel</button>
                    <input id="alojamiento.hotel.id" name="alojamiento[]hotel[]id" type="hidden" />
                </div>
                <div>
                    <label for="alojamiento.cantidadHabitacionSimple">Cantidad de habitaciones simples</label> 
                    <input id="alojamiento.cantidadHabitacionSimple" name="alojamiento[]cantidadHabitacionSimple" type="text" class="number" />
                </div>
                <div>
                    <label for="alojamiento.cantidadHabitacionDoble">Cantidad de habitaciones dobles</label> 
                    <input id="alojamiento.cantidadHabitacionDoble" name="alojamiento[]cantidadHabitacionDoble" type="text" class="number" />
                </div>
                <div>
                    <label for="alojamiento.cantidadHabitacionOtra">Cantidad de otras habitaciones</label> 
                    <input id="alojamiento.cantidadHabitacionOtra" name="alojamiento[]cantidadHabitacionOtra" type="text" class="number" />
                </div>
                <div>
                    <label for="alojamiento.vencimiento1">Primer vencimiento</label> 
                    <input id="alojamiento.vencimiento1" name="alojamiento[]vencimiento1"  type="text" class="datepicker"/>
                </div>
                <div>
                    <label for="alojamiento.vencimiento2">Segundo vencimiento</label> 
                    <input id="alojamiento.vencimiento2" name="alojamiento[]vencimiento2" type="text" class="datepicker"/>
                </div>
                <div>
                    <label for="alojamiento.vencimiento3">Tercer vencimiento</label> 
                    <input id="alojamiento.vencimiento3" name="alojamiento[]vencimiento3"  type="text" class="datepicker" />
                </div>
                <button class="button" id="agregar_alojamiento">Agregar Alojamiento</button>
                <dl id="alojamientos" class="listado_agregados">
                  
                </dl>
            </fieldset>    			
		</form>
	    <form id="form_ruta" name="form_ruta">
            <fieldset class="step s_column" id="seccion_ruta">
                <legend>Ruta</legend>
                <div>
                    <ul id="errorRutaBox">
                    </ul>
                </div>
                <div id="ruta">
                    <input id="ruta.id" name="ruta.id" data-jq-linkto="id" data-jq-linkfrom="id" type="hidden"/>
	                <div>
	                    <label for="ruta.cantidadAereo">A&eacute;reos confirmados:</label> 
	                    <input id="ruta.cantidadAereo" name="ruta.cantidadAereo" data-jq-linkto="cantidadAereo" data-jq-linkfrom="cantidadAereo" type="text" class="number" />
	                </div>
	                <div>
	                    <label for="ruta.vencimiento1">Primer vencimiento</label> 
	                    <input id="ruta.vencimiento1" name="ruta.vencimiento1"  data-jq-linkto="vencimiento1" data-jq-linkfrom="vencimiento1" type="text" class="datepicker"/>
	                </div>
	                <div>
	                    <label for="ruta.vencimiento2">Segundo vencimiento</label> 
	                    <input id="ruta.vencimiento2" name="ruta.vencimiento2" data-jq-linkto="vencimiento2" data-jq-linkfrom="vencimiento2" type="text" class="datepicker"/>
	                </div>
	                <div>
	                    <label fohotel.nombrer="ruta.vencimiento3">Tercer vencimiento</label> 
	                    <input id="ruta.vencimiento3" name="ruta.vencimiento3"  data-jq-linkto="vencimiento3" data-jq-linkfrom="vencimiento3" type="text" class="datepicker" />
	                </div>
	            </div>    
                <table class="form_table">
	                <thead>
	                    <tr class="small">
	                        <th>Origen/Destino</th>
	                        <th>Vuelo</th>
	                        <th>Fecha</th>
	                        <th>Salida</th>
	                        <th>Llegada</th>
	                        <th>Accion</th>
	                    </tr>
	                </thead>
	                <tfoot>
	                    <tr>
	                        <th colspan="4"><span>vuelos</span></th>
	                        <th colspan="2"><button id="agregar_vuelo">Agregar Vuelo</button></th>
	                    </tr>
	                <tfoot>
	                <tbody id="listado_vuelos">
	                    
	                </tbody>
	            </table>
            </fieldset>        
    	</form> 
        <button class="button" id="crear">Crear </button>
        <button class="button" id="volver">Volver al listado</button>
		
		<div id="dialog_form_hotel" title="">
		    <div class="row">
		        <div class="contenedor_mensaje col col_8">
                    <div id="mensaje_hotel"></div>
                </div>
            </div>
            <div class ="col_8">
			<form id="form_hotel" name="form_hotel">
	            <fieldset class="s_column" id="seccion_hotel">
	                <legend>Hotel</legend>
	                <div>
	                    <label for="hotel.nombre">Nombre*</label> 
	                    <input id="hotel.nombre" name="hotel[]nombre"  type="text" class="required" />
	                    <input id="hotel.id" name="hotel[]id"  type="hidden" />
	                </div>
	                <div>
	                    <label for="hotel.direccion">Direcci&oacute;n</label> 
	                    <input id="hotel.direccion" name="hotel[]direccion"  type="text" />
	                </div>
	                <div>
	                    <label for="hotel.telefono">Telefono</label> 
	                    <input id="hotel.telefono" name="hotel[]telefono"  type="text"/>
	                </div>
	                <div>
	                    <label for="hotel.contacto">Contacto</label> 
	                    <input id="hotel.contacto" name="hotel[]contacto"  type="text"/>
	                </div>
	                 <div>
	                    <label for="hotel.mail">Email</label> 
	                    <input id="hotel.mail" name="hotel[]mail"  type="text" class="email"/>
	                </div>
	            </fieldset>
	        </form> 
	        </div>
        </div>       
	</div>
	<div class="col col_3">&nbsp;</div>
</div>
